<template>
  <div class="wrapper">
    <!-- header部分 -->
    <div class="head">
      <div class="head_left">
        <el-icon @click="back"><ArrowLeftBold /></el-icon>
      </div>
      <div class="head_right">
        <p>商家列表</p>
      </div>
    </div>
    <!-- 商家列表部分 -->
    <ul  class="foodList" >
      <li v-for="business in data.businesses" :key="business.businessId" @click="toBusinessInfo(business.businessId)">
        <div class="foodItem_1">

          <div class="business-img">
            <img :src="business.businessImg">
            <div class="business-img-quantity" v-show="business.quantity > 0">
              {{ business.quantity }}
            </div>
          </div>

          <div class="right">
            <div class="one">{{business.businessName}}</div>
            <div class="two">

              <div class="left">4.9分</div>
              <div class="center">月售700+</div>
              <div class="right">30分钟&nbsp;624m</div>

            </div>
            <div class="three">

              <div class="left">起送 &yen;{{ business.starPrice }}&nbsp;配送 &yen;{{ business.deliveryPrice }}</div>
              <div class="center"><del> &yen;5.3</del></div>
              <div class="right">蜂鸟准时达</div>


            </div>
            <div class="four">
              <div>夜宵热搜</div>
            </div>
            <div class="five">
              <div class="left">👑6元无门槛</div>
              <div class="right">25减3&nbsp;40减5</div>
            </div>

          </div>
        </div>
      </li>
    </ul >



    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Footer from '../components/Footer.vue';
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import { useRoute } from 'vue-router';
import router from "@/router";
import { authService } from '@/service/AuthService';
import {ArrowLeftBold} from "@element-plus/icons-vue";


const data = reactive({
  businesses:{},
  orderTypeId:1,

})

const route = useRoute();
// 创建一个响应式引用来存储 orderTypeId
data.orderTypeId = route.query.orderTypeId;

onMounted(() => {
  // 组件挂载后执行的代码
  getBusinesses(data.orderTypeId);
});

// 查询商家列表
const getBusinesses = (orderTypeId)=>{
  request.get(`/Business/listBusinessByOrderTypeId/${orderTypeId}` ).then(res =>{
    if( res.code === 1){
      data.businesses = res.data

    }else {
      ElMessage.error(res.msg)

    }
  })

}

const toBusinessInfo =(businessId) => {
  router.push({ path: '/businessInfo', query: {businessId, orderTypeId: data.orderTypeId} });
}


const back =()=>{
  router.push({
    path: '/index',
    query: {
      businessId: data.businessId,
      orderTypeId: data.orderTypeId
    }
  });
}



</script>


<style scoped>
/*总容器 */
.wrapper {
  width: 100%;
  height: 100%;
}
/*head*/

.wrapper .head {
  width: 100%;
  height: 12vw;
  background-color: #17BAF9;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  /*保证在最上层*/
  z-index: 1000;
}

.wrapper .head .head_left{
  flex: 3;
  margin-left: 4vw;
  margin-top: 1vw;
}
.wrapper .head .head_right{
  flex: 6;
  margin-left: 2vw;
  font-size: 6vw;
}

/* 商家列表部分 */
.wrapper .foodList {
  width: 100%;
  margin-top: 12vw;
  margin-bottom: 14vw;
}
.foodList li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #DDD;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/*标签的图片上的数字效果*/

.foodList li .business-img {
  /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
  position: relative;
}
.foodList li .business-img img {
  height: 30vw;
  width: 25vw;
}
.foodList li .foodItem_1 .business-img .business-img-quantity {
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  /*设置成绝对定位，不占文档流空间*/
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}


/*第一个食品*/
.wrapper .foodList .foodItem_1{
  display: flex;
  margin-top: 3vw;
  width: 100vw;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-bottom: 3vw;


}
.wrapper .foodList .foodItem_1 .left{
  margin-right: 3vw;
}
/*图片*/

.wrapper .foodList .foodItem_1 .left img{
  height: 25vw;
  width: 25vw;
}

/*右边*/
.wrapper .foodList .foodItem_1 .right {
  margin-left: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}
.wrapper .foodList .foodItem_1 .right .one{
  font-size: 5vw;
  font-weight: bold;
}

.wrapper .foodList .foodItem_1 .right .two{
  font-size: 3vw;
  display: flex;
  align-items: center;
}

.wrapper .foodList .foodItem_1 .right .two .left{
  color: coral;
  font-weight: bold;
}

.wrapper .foodList .foodItem_1 .right .two .center{
  color:#9F9F9F ;
  margin-right: 12vw;


}
.wrapper .foodList .foodItem_1 .right .two .right{
  color:#9F9F9F ;
  margin-right: 4vw;
}
.wrapper .foodList .foodItem_1 .right .three{
  display: flex;
  align-items: center;
}

.wrapper .foodList .foodItem_1 .right .three .left{
  font-size: 3vw;
  color:#9F9F9F ;
}

.wrapper .foodList .foodItem_1 .right .three .center{
  font-size: 3vw;
  color: #BEBEBE;
  margin-right: 7vw;
}
.wrapper .foodList .foodItem_1 .right .three .right{
  font-size: 3vw;
  color:#00A6EB;
  border: #17BAF9 0.1vw solid;
  border-radius: 2vw;
  position: absolute; /* 添加绝对定位 */
  right: 0; /* 从父元素的右边界开始 */
  margin-right: 6vw;

}

.wrapper .foodList .foodItem_1 .right .four{
  display: flex;
  align-items: center;
  background-color:#FFDAB9;
  color: darkorange;
  width:33vw;
  height: 5vw;
  padding-left: 2vw;
  border-radius: 2vw;
  font-size: 3vw;
}

.wrapper .foodList .foodItem_1 .right .five{
  display: flex;
  align-items: center;
}
.wrapper .foodList .foodItem_1 .right .five .left{
  border-radius: 2vw;
  border: 0.2vw goldenrod solid;
  color:goldenrod ;
  font-size: 3vw;
  padding:0.5vw;
}

.wrapper .foodList .foodItem_1 .right .five .right{
  color: red;
  border-radius: 2vw;
  border: 0.2vw lightcoral solid;
  font-size:3vw;
  padding:0.5vw;

}


</style>